<template>
    <Modal
        title="评价工单"
        :value="show"
        width="580"
        @on-visible-change="setVisibility">

        <Form
            class="margin-top-20 padding-left-20 padding-right-20"
            :rules="rules"
            :model="form"
            :show-message="false"
            ref="formModel">
            <Row :gutter="20">
                <Col span="12">
                    <FormItem label="上门时效评分" prop="in">
                        <Rate v-model="form.in"></Rate>
                    </FormItem>
                    <FormItem label="服务专业评分" prop="profession">
                        <Rate v-model="form.profession"></Rate>
                    </FormItem>
                    <FormItem label="整体满意评分" prop="entirety">
                        <Rate v-model="form.entirety"></Rate>
                    </FormItem>
                </Col>

                <Col span="12">
                    <FormItem label="服务态度评分" prop="attitude">
                        <Rate v-model="form.attitude"></Rate>
                    </FormItem>
                    <FormItem label="调度沟通评分" prop="communication">
                        <Rate v-model="form.communication"></Rate>
                    </FormItem>
                </Col>
            </Row>

            <Input
                :rows="3"
                type="textarea"
                v-model="form.note"
                placeholder="为了下次给您更好的服务，请留下您的宝贵建议"
                class="margin-bottom-20"></Input>
        </Form>

        <Row slot="footer">
            <Button type="text" @click="setVisibility(false)">取消</Button>
            <Button type="primary" @click="handleSubmit">提交</Button>
        </Row>
    </Modal>
</template>

<script>
/**
 *  工单 - 评价
 */

export default {
  name: 'merchant-cancel-modal',
  props: {
    show: Boolean,
    ticket: Object
  },
  data () {
    const checkRate = (rule, value, callback) => {
      if (value === -1) {
        callback(new Error('请选择评分'))
      } else {
        callback()
      }
    }
    return {
      form: {
        in: -1,
        profession: -1,
        entirety: -1,
        attitude: -1,
        communication: -1
      },
      rules: {
        in: { required: true, validator: checkRate },
        profession: { required: true, validator: checkRate },
        entirety: { required: true, validator: checkRate },
        attitude: { required: true, validator: checkRate },
        communication: { required: true, validator: checkRate }
      }
    }
  },
  watch: {
    show (n) {
      if (n) {
        this.$Message.info('暂无此功能')
      } else {
        this.$refs.formModel.resetFields()
        this.$emit('update:ticket', null)
      }
    }
  },
  methods: {
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    handleSubmit () {
      this.$refs.formModel.validate(valid => {
        if (valid) {
          this.$emit('refresh')
          this.setVisibility(false)
        } else {
          this.$Message.error('请对所有项目评分')
        }
      })
    }
  }
}
</script>